<template>
    <el-row style="margin-bottom: 10px;">
        <el-col :span="5"><el-input></el-input></el-col>
        <el-col :span="12" :offset="1"><el-button>搜索</el-button></el-col>
    </el-row>
    <el-row>
        <el-table :data="areaList" border style="width: 100% " @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopName" label="名称" header-align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="shopId" label="ID" header-align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="shopSort" label="排序" header-align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="shopAddress" label="坐标" header-align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="shopOrderCount" label="订单数量" header-align="center"
                label-class-name="header"></el-table-column>
        </el-table>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0px;padding: 0 20px;">
        <el-col :span="3" :offset="18">
            <el-button type="default" @click="cancle">取消</el-button></el-col>
        <el-col :span="3">
            <el-button type="primary" @click="save">确定</el-button></el-col>
    </el-row>
</template>
<script setup>
import { defineEmits, defineProps } from 'element-plus/es/components/select-v2/src/useProps';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

let res = null;
let areaList = ref([]);
let multipleSelection = ref([]);
const emits = defineEmits(["operate"]);

let props = defineProps({
    communityId: {
        type: String,
        Required: true
    }
})

const handleSelectionChange = (val) => {
    multipleSelection.value = val.map((item)=>{
        item = item.shopId;
        return item;
    })
    console.log(val);
    multipleSelection.value=[...multipleSelection.value];
    
}

const cancle = function () {
    emits("operate");
}

const save = async function () {
    res = await axios.post(`http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/addAssociatedStores`, {panghuCommunityId: props.communityId, fendeShopCommunityList: multipleSelection.value})

    ElMessage({
        message: res.data.message,
        type: res.data.status == 200 ? "success" : "error"
    })
    emits("operate");
}


onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/findShopListByAdd?pageNum=1&pageSize=50&shopName=&communityId=1069083");
    console.log(res);
    areaList.value = res.data.data.list.map(item => {
        item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    });
})
</script>

<style lang="less" scoped>
.row {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>